<template>
  <div class="setTemplate">
    <Vheader :header="header"></Vheader>
    <ul class="templateUl">
      <div class="navigation">
        <button class="navigteBar" :class = "{'bgColorCss1':isCss1,'bgColorCss2':isCss2}" @click = "setQRCode()" ><span>设置公众号二维码</span></button>
        <button class="navigteBar" :class = "{'bgColorCss1':isCss3,'bgColorCss2':isCss4}" @click = "setActivityHeader()"><span>设置活动标题</span></button>
        <button class="navigteBar" :class = "{'bgColorCss1':isCss5,'bgColorCss2':isCss6}" @click = "setCounts()"><span>玩家允许参与次数</span></button>
        <button class="backBtn" @click = "goBack()">返回</button>
      </div>
      <div class="setContent">
        <div class="content" v-show="setQRCodeVisible">
          <span><hr class="hrTopLeft">请上传举办活动所对应的的公众号二维码<hr class="hrTopRight"></span>
          <div class="QRCode">
              <img v-if="pathUrl!== ''" :src="pathUrl">
          </div>
          <button class="upload">上传
            <input type = "file" @change="onChange" accept="image/png, image/jpeg, image/gif, image/jpg">
          </button>
          <p>二维码图片需小于1M</p>
          <span><hr class="hrBottomL">预览<hr class="hrBottomR"></span>
          <div class="mobileImg"><img src="static/imgs/myTemplateImg/MyTemplate_MobileTemplate.png"></div>
        </div>
        <div class="content" v-show="setActivityHeaderVisible">
          <input type="text" name="activityTitle" class="activityTitle" v-model="activityList.title">
          <div><button v-if ="activityList.title" class="modify">修改</button></div>
          <span><hr class="hrBottomL">预览<hr class="hrBottomR"></span>
          <div class="mobileImg"><img src="static/imgs/myTemplateImg/MyTemplate_MobileTemplate.png"></div>
          <span><hr class="hrBottomL">说明<hr class="hrBottomR"></span>
          <textarea name="instruction" class="instruction" cols="20" rows="10" v-model="activityList.description"></textarea>
        </div>
        <div class="content" v-show="setCountsVisible">
          <div class="setTimes">
            <div>
              <div class="radio1">
              <label for="1">每个玩家只允许参与一次</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="times" value="1" v-model="activityList.playCount">
              </div>
            </div>
            <div class="radio2">
              <label for="infinite">不限制</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="times" value="0" v-model="activityList.playCount">
              </div>
            </div>
            </div>
            <div class="radioX">
              <label for="userDefined">自定义<input class = "radioInput" type="number" name="userDefined" min="2" placeholder="请输入大于1" v-model="times">次</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="times" value="user" v-model="activityList.playCount">
              </div>
            </div>
            <div><button class="save" @click="setActivity()">保存</button></div>
          </div>
          <span><hr class="hrBottomL">说明<hr class="hrBottomR"></span>
          <textarea name="instruction" class="instruction" cols="20" rows="10" v-model="activityList.description2"></textarea>
        </div>
      </div>
    </ul>
    <Vfooter></Vfooter>
    <!--登录注册dialog-->
    <Vdialog></Vdialog>
  </div>
</template>

<script>
/*eslint-disable*/
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { loginAction, registerAction, forgetPasswordAction } from '../axios/api/homePage_api'
import { getActivityListAction, setActivityAction } from '../axios/api/setActivityTemplate_api'

export default {
  name: 'setTemplate',
  data () {
    var validatePhone = ''
    return {
      header: {
        userName: '',
        logout: this.logout,
        login: '',
        templateAction: this.templateAction,
        template: '返回首页'
      },
      // 控制dialog是否显示，以及显示那个模块的变量
      dialogVisible:false,
      setQRCodeVisible:true,
      setActivityHeaderVisible:false,
      setCountsVisible:false,
      isCss1: false,
      isCss2: true,
      isCss3: true,
      isCss4: false,
      isCss5: true,
      isCss6: false,
      count:'',
      activityList:{
        userTemplateId:'',
        title:'',
        activityName:'',
        playCount:'',
        description:'',
        description2:'',
        qrCode:''
      },
      pathUrl: "",
      times:''
    }
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.activityList = this.$route.query.activityList;
    let file = this.activityList.qrCode;
    this.pathUrl = '/littlefinger/storage/images/' + file;
    if (this.activityList.playCount > 1){
      this.times = this.activityList.playCount;
      this.activityList.playCount = 'user'
    }
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    // 点击设置公众号二维码
    setQRCode(){
      this.setQRCodeVisible = true;
      this.setActivityHeaderVisible = false;
      this.setCountsVisible = false;
      this.isCss1 = false;
      this.isCss2 = true;
      this.isCss3 = true;
      this.isCss4 = false;
      this.isCss5 = true;
      this.isCss6 = false;
    },
    //点击设置活动标题
    setActivityHeader(){
      this.setQRCodeVisible = false;
      this.setActivityHeaderVisible = true;
      this.setCountsVisible = false;
      this.isCss1 = true;
      this.isCss2 = false;
      this.isCss3 = false;
      this.isCss4 = true;
      this.isCss5 = true;
      this.isCss6 = false;
    },
    //点击设置玩家允许参与次数
    setCounts(){
      this.setQRCodeVisible = false;
      this.setActivityHeaderVisible = false;
      this.setCountsVisible = true;
      this.isCss1 = true;
      this.isCss2 = false;
      this.isCss3 = true;
      this.isCss4 = false;
      this.isCss5 = false;
      this.isCss6 = true;
    },
    //获取选取的文件
    onChange($event) {
      this.activityList.qrCode = $event.target.files[0]
      let file = this.activityList.qrCode
      var wuc = window.URL.createObjectURL(file);
      this.pathUrl = wuc
    },
    // 关闭dialog
    handleClose () {
      this.dialogVisible = false;
    },
    goBack() {
      this.$router.push({name: 'myActivity'});
    },
    templateAction(){
      this.$router.push({name: 'homePage'});
    },

    //设置活动模板内容
    async setActivity(){
      if(this.times !== '') {
        this.activityList.playCount = this.times
      }
      let {data} = await setActivityAction(this.activityList)
      if (data.code === 1){
        this.$message({
          message: '设置活动成功！',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '设置活动失败！',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.setTemplate{
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
}
  .setTemplate .templateUl{
    min-width: 1000px;
  	height: 916px;
  	box-shadow: 4px 4px 13px #666;
  	background-color: #fff;
    margin: 28px 120px;
    justify-content: center;
    flex-direction: column;
  }
  /*导航条样式*/
  .navigation{
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 100%;
    background-color: #e4e4e445;
  }
  .navigteBar{
    position: relative;
    height: 70px;
    margin-bottom: 8px;
    font-family: 'SimSun';
    font-size: 24px;
    border: 1px solid #ccc;
    line-height: 65px;
  }
  .navigteBar:visited{
    background-color: #47cb69;
    color: #fff;
  }
  .navigteBar:hover{
    background-color: #47cb69;
    color: #fff;
  }
  .bgColorCss1{
    background-color: #e4e4e445;
    color: #8a8a8a;
  }
  .bgColorCss2{
    background-color: #47cb69;
    color: #fff;
  }
  .backBtn{
    position: relative;
    width: 85%;
    height: 40px;
    font-size: 24px;
    font-family: 'SimSun';
    color: #47cb69;
    border: 1px solid #47cb69;
    border-radius: 3px;
    margin-top: 620px;
    margin-left: 7.5%;
    background-color: transparent;
  }
  .backBtn:hover{
    background-color: #47cb69;
    color: #fff;
  }
  /*设置公众号二维码样式*/
.setContent{
  display: inline-flex;
  width: 75%;
  float: right;
  flex-direction: column;
  justify-content: center;
  margin-top: -885px;
}
  .content hr{
    color: #e9e9e9;
    border-top: 2px solid;
  }
  .hrTopLeft{
    width: 16%;
    margin-left: 50px;
    margin-bottom: -20px;
  }
  .hrTopRight{
    width: 16%;
    margin-right: 50px;
    margin-top: -20px;
  }
  .content span{
    font-family: 'SimSun';
    font-size: 24px;
    color: #8a8a8a;
  }
  .QRCode{
    width: 228px;
    height: 228px;
    border:1px solid #ccc;
    border-radius: 3px;
    background-color:transparent;
    margin-left:36%;
    margin-top: 21px;
    padding: 5px;
  }
  .QRCode img{
    background-color: #e9e9e9;
    margin-top: 3px;
    width: 218px;
    height: 218px;
    border: none;
  }
  .upload input{
    opacity: 0;
    position: relative;
    width:144px;
    height: 40px;
    overflow: hidden;
    margin-top: -75px;
  }
  .upload{
      width: 144px;
      height: 40px;
      font-family: 'SimSun';
      font-size: 24px;
      background-color: #47cb69;
      color: #fff;
      border:1px solid #47cb69;
      border-radius: 3px;
      line-height: 35px;
      margin-top: 10px;
    }
    .upload:hover{
      background-color: #50e476;
      color: #fff;
    }
  .content button:hover{
    background-color: #50e476;
  }
  .content p{
    font-family: 'SimSun';
    font-size: 18px;
    color: #535353;
    margin-top: 0px;
    margin-bottom: 23px;
  }
  .hrBottomL{
    width: 38%;
    margin-left: 50px;
    margin-bottom: -20px;
  }
  .hrBottomR{
    width: 38%;
    margin-right: 50px;
    margin-top: -20px;
  }
  .mobileImg{
    margin-top: 30px;
  }
  /*设置活动标题*/
  .activityTitle{
    width: 316px;
    height: 39px;
    border: 2px solid #e9e9e9;
    border-radius: 3px;
    justify-content: center;
    font-family: 'SimSun';
    font-size: 20px;
    background-color: #e9e9e7;
    text-align: center;
  }
 .modify{
  margin-top: 32px;
  width: 123px;
  height: 40px;
  font-size: 20px;
  font-family: 'SimSun';
  background-color: #47cb69;
  color: #fff;
  border:1px solid #47cb69;
  border-radius: 3px;
  margin-bottom: 36px;
 }
 .instruction{
  border-radius: 3px;
  border:2px solid #e9e9e9;
  width: 80%;
  height:180px;
  margin-top: 16px;
  margin-bottom: 19px;
 }
/*设置玩家参与次数样式*/
.radio{
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: row;
  }
    .radio1{
      display: inline-block;
      width: 300px;
      height: 107px;
      font-family: 'SimSun';
      font-size: 24px;
      color: #424242;
      border:2px solid #47cb69;
      border-radius: 3px;
      margin-right: 30px;
      line-height: 100px;
    }
    .radio2{
      display: inline-block;
      width: 300px;
      height: 107px;
      font-family: 'SimSun';
      font-size: 24px;
      color: #424242;
      border:2px solid #47cb69;
      border-radius: 3px;
      margin-left: 30px;
      line-height: 100px;
    }
    .radioCss {
      width: 15px;
      height: 10px;
      margin-top: -140px;
      background-color: #000;
      border-radius: 50%;
      position: relative;
    }
    .radioX {
      display: inline-block;
      width: 324px;
      height: 107px;
      font-family: 'SimSun';
      font-size: 24px;
      color: #424242;
      background-color: #e9e9e9;
      border:3px solid #e9e9e9;
      border-radius: 3px;
      margin-top: 37px;
      line-height: 100px;
    }
    .radioInput{
      width: 157px;
      height: 40px;
      margin: 0px 5px;
      font-size: 20px;text-align: center;

    }
    .radioCss:before,.radioCss:after{
      content: '';
      display: block;
      position: absolute;
      border-radius: 50%;
      transition: .3s ease;
    }
    .radioCss:before{
      top: 0px;
      left: 0px;
      width: 16px;
      height: 16px;
      background-color: #fff;
      border: 1px solid #000;
    }
    .radioCss:after{
      top: 6px;
      left: 6px;
      width: 6px;
      height: 6px;
      background-color: #fff;
    }
    .radioCss:checked:after{
      top: 4px;
      left: 4px;
      width: 10px;
      height: 10px;
      background-color:#000;
    }
    .radioCss:checked:before{
      border-color: #000;
    }
    .save{
      width: 144px;
      height: 40px;
      font-size: 20px;
      font-family: 'SimSun';
      background-color: #47cb69;
      color: #fff;
      border:1px solid #47cb69;
      border-radius: 3px;
      margin-bottom: 103px;
    }
    .imgCss{}
</style>
